<template>
  <div class="main_box">
    <el-row class="boxRow">
      <el-col class="boxMain" :class="isStart ? '' : info == null || info.parameterCodeOne == null ? 'not_config' : ''">
        <div v-if="!isView">
          <div class="deploy">
            <div class="text-white configure_title">圆饼图</div>
            <el-button type="primary" size="small" @click="setDeploy(1)">配 置</el-button>
          </div>
        </div>
        <div class="chart_title" v-if="info != null && info.parameterCodeOne != null">
          <div class="justify_between align-items-center">
            <div class="d-flex align-items-center pl-2">
              <div class="line-title"></div>
              <div class="title">系统运行信息</div>
            </div>
            <!-- <div><span>设备编号：{{ info.id }}</span></div> -->
          </div>
          <!-- <div><span>设备地址：{{ info.address }}</span></div> -->
        </div>
        <div id="chart-pie" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain" :class="isStart ? '' : info == null || info.parameterCodeTwo == null ? 'not_config' : ''">
        <div v-if="!isView">
          <div class="deploy">
            <div class="text-white configure_title">柱状图</div>
            <el-button type="primary" size="small" @click="setDeploy(2)">配 置</el-button>
          </div>
        </div>
        <div class="chart_title" v-if="info != null && info.parameterCodeTwo != null">
          <div class="justify_between align-items-center">
            <div class="d-flex align-items-center pl-2">
              <div class="line-title"></div>
              <div class="title">系统运行信息</div>
            </div>
            <!-- <div><span>设备编号：{{ info.id }}</span></div> -->
          </div>
          <!-- <div><span>设备地址：{{ info.address }}</span></div> -->
        </div>
        <div id="chart-one" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain lastLine" :class="isStart ? '' : info == null || info.parameterCodeThree == null ? 'not_config' : ''">
        <div v-if="!isView">
          <div class="deploy">
            <div class="text-white configure_title">折线图</div>
            <el-button type="primary" size="small" @click="setDeploy(3)">配 置</el-button>
          </div>
        </div>
        <div class="chart_title" v-if="info != null && info.parameterCodeThree != null">
          <div class="justify_between align-items-center pl-2">
            <div class="d-flex align-items-center">
              <div class="line-title"></div>
              <div class="title">系统运行信息</div>
            </div>
            <!-- <div><span>设备编号：{{ info.id }}</span></div> -->
          </div>
          <!-- <div><span>设备地址：{{ info.address }}</span></div> -->
        </div>
        <div id="line-one" class="my_chart"></div>
      </el-col>
    </el-row>
    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import charts from './chart.js'
import deployDialog from './dialog/deployDialog.vue'
import { queryDeviceRealTB, queryDeviceRealBZT } from '@/api/showManage/index'
import { queryOrUpdateProjectOverviewTwo, queryConfiguredParameterTwo } from '@/api/projectOverview/index'
export default {
  components: {
    deployDialog
  },
  props: {
    isView: {
      //展示还是配置
      type: Boolean,
      default: () => true
    },
    configured: {
      // 已配置
      type: Array,
      default: () => []
    },
    viewSet: {
      //获取数据的配置参数params
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showNum: 0,
      info: {},
      isStart: true,
      timeInterval: null
    }
  },
  created() {
    this.setTime()
  },
  mounted() {
    this.getData()
  },
  watch: {
    isView: {
      handler(newValue) {
        if (this.isView) this.getData()
      },
      deep: true
    }
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    this.timeInterval = null
  },
  methods: {
    setTime() {
      this.timeInterval = setInterval(() => {
        this.getData()
      }, 20000)
    },
    getData() {
      queryOrUpdateProjectOverviewTwo().then((res) => {
        this.info = res.object
        this.isStart = false
        if (res.object == null) return
        Object.keys(res.object).forEach((key) => {
          if (key == 'parameterCodeOne' || key == 'parameterCodeTwo' || key == 'parameterCodeThree') {
            if (res.object[key] != null) {
              this.getPar(key, res.object)
            }
          }
        })
      })
    },
    getPar(key, data) {
      let code = key == 'parameterCodeOne' ? 'deviceCodeOne' : key == 'parameterCodeTwo' ? 'deviceCodeTwo' : 'deviceCodeThree'
      let obj = {
        deviceCode: data[code],
        params: data[key]
      }
      let result = key == 'parameterCodeOne' ? queryDeviceRealBZT : queryDeviceRealTB
      result(obj).then((res) => {
        if (key == 'parameterCodeOne') charts.pieEchart(res.object.valueData)
        if (key == 'parameterCodeTwo') charts.columnarEchart(res.object)
        if (key == 'parameterCodeThree') charts.lineEchart(res.object)
        console.log(res, '******')
      })
    },
    setDeploy(num) {
      queryConfiguredParameterTwo({
        index: num
      }).then((res) => {
        if (Object.keys(res.object).length != 0) {
          this.$refs.deployDialog.value = res.object.deviceCode
          this.$refs.deployDialog.getList(2, res.object.list)
        }
      })
      this.$refs.deployDialog.type = 1
      this.$refs.deployDialog.setNum = num
      this.$refs.deployDialog.isView = true
      this.$refs.deployDialog.getOptions()
      this.$refs.deployDialog.dialogVisible = true
    },
    refresh(id) {
      this.configured.push(this.setNum)
    }
  }
}
</script>

<style lang="scss" scoped>
.configure_title {
  position: absolute;
  top: 20px;
  left: 30px;
  font-size: 16px;
}
.not_config {
  background-image: url('../../../assets/img/dataDel.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.main_box {
  height: 34%;
}

.boxRow {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 10px 0 10px 0;

  span {
    color: #9a9a9a;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.boxMain {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  margin-right: 20px;
  background-color: #fff;
  width: calc((100% - 40px) / 3);
  height: 100%;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  position: relative;
}

.lastLine {
  margin-right: 0 !important;
}

.my_chart {
  // height: 200px;
  // width: 100%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  height: 100%;
}

.chart_title {
  padding: 10px;
}

.justify_between {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tab_title {
  font-size: 18px;
  font-weight: 400;
}

.deploy {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  opacity: 0.9;
  background-color: #b2b2b2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.configured {
  text-align: right;
  margin-right: 8px;
  color: #3276ff;
  cursor: pointer;
}

.line-title {
  width: 4px;
  height: 12px;
  background-color: #3276ff;
  margin-right: 10px;
  border-radius: 4px;
}

.title {
  font-family: 'SourceHan';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #333333;
}
</style>
